import React from 'react';
import {Menu, Icon, Row, Col, Tabs, Modal, message, Form, Input, Button, CheckBox} from 'antd';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class PCHeader extends React.Component {

    constructor() {
        super();
        this.state = {
            current: 'top',
            modaVisible: false,
            action: 'login',
            hasLogined: false,
            userNickName: '',
            userId: 0
        }
    }


    setModalVisible(value) {
        this.setState({
            modaVisible: value
        });
    }

    handleClick(e) {
        if (e.key == "register") {
            this.setModalVisible(true);
        }else if(e.key == 'logout'){

        } else {
            this.setModalVisible(false);
            this.setState({
                current: e.key
            });
        }
    }

    /**
     * 判断tabs点击
     */
    callback(key){
        if(key == 1){
            this.setState({
                action:'login'
            })
        }else if(key == 2){
            this.setState({
                action:'register'
            })
        }

    }


    handleSubimit(e) {

        let action = this.state.action;
        //页面向数据提交
        e.preventDefault();
        var myFetchOptions = {
            method: 'GET'
        };

        //获取表单数据
        var formData;
        this.props.form.validateFields ((err, values) => {
            if (!err) {
                formData = values;
            }
        });
        console.log(formData);

        if(action=='login'){
            //fetch 登录请求
            fetch("http://newsapi.gugujiankong.com/Handler.ashx?action="+this.state.action
                + "&username=" + formData.userName + "&password=" + formData.password, myFetchOptions).then(response => response.json()).then(json => {
                this.setState({
                    userNickName: json.NickUserName,
                    userId: json.UserId,
                    hasLogined:true
                })
            });
            message.success('登录成功！');
            this.setModalVisible(false);



        }else{
            //fetch 注册请求
            fetch("http://newsapi.gugujiankong.com/Handler.ashx?action="+this.state.action
                + "&username=" + formData.userName + "&password=" + formData.password
                + "&r_confirmPassword=" + formData.confirm, myFetchOptions).then(response => response.json()).then(json => {
                this.setState({
                    userNickName: json.NickUserName,
                    userId: json.UserId,
                })
            });

        }

    }


    render() {
        const {getFieldDecorator} = this.props.form;
        const userShow = this.state.hasLogined ?
            <Menu.Item key='logout' class='register'>
                <Button type='primary' htmlType='button'>{this.state.userNickName}</Button>&nbsp;&nbsp;
                <Button type='dashed' htmlType='button'>个人中心</Button>&nbsp;
                <Button type='ghost' htmlType='button'>退出</Button>
            </Menu.Item> :
            <Menu.Item key='register' class='register'>
                <Icon type='appstore'/>注册/登录
            </Menu.Item>;


        return (
            <header class="header">
                <Row>
                    <Col span={2}></Col>
                    <Col span={4}>
                        <a href="/" class="logo"><img src="./src/images/news.png" alt="新闻网"/> <span>新闻网</span></a>
                    </Col>
                    <Col span={16}>
                        <Menu
                            theme="dark"
                            mode="horizontal"
                            onClick={this.handleClick.bind(this)}
                            selectedKeys={[this.state.current]}
                            style={{lineHeight: '60px', fontSize: '15px'}}
                        >
                            <Menu.Item key="top"><Icon type="appstore"/>头条</Menu.Item>
                            <Menu.Item key="shehui"><Icon type="camera"/>社会</Menu.Item>
                            <Menu.Item key="guoner"><Icon type="export"/>国内</Menu.Item>
                            <Menu.Item key="guoji"><Icon type="solution"/>国际</Menu.Item>
                            <Menu.Item key="yule"><Icon type="switcher"/>娱乐</Menu.Item>
                            <Menu.Item key="tiyu"><Icon type="compass"/>体育</Menu.Item>
                            <Menu.Item key="keji"><Icon type="exception"/>科技</Menu.Item>
                            {userShow}
                        </Menu>

                        <Modal
                            title='用户中心'
                            wrapClassName='vertical-center-modal'
                            visible={this.state.modaVisible}
                            onCancel={this.handleClick.bind(this)}
                            onOk={this.handleClick.bind(this)}
                        >

                            <Tabs type='card'
                                  defaultActiveKey="1"
                                  onChange={this.callback.bind(this)}>

                                <TabPane tab="登录" key="1">
                                    <Form onSubmit={this.handleSubimit.bind(this)}>
                                        <FormItem
                                            label='用户名'
                                            hasFeedback>
                                            {getFieldDecorator('userName', {
                                                rules: [{
                                                    type: 'string',whitespace:true,min:3,max:12, message: '用户名',
                                                }],
                                            })(<Input/>)}
                                        </FormItem>
                                        <FormItem label='密码'>
                                            {getFieldDecorator('password', {
                                                rules: [{
                                                    message: '请输入您的密码',
                                                }],
                                            })(<Input type="password"/>)}
                                        </FormItem>
                                        <Button type='primary' htmlType='submit'>登录</Button>
                                    </Form>
                                </TabPane>

                                <TabPane
                                    tab="注册"
                                    key='2'
                                >
                                    <Form onSubmit={this.handleSubimit.bind(this)}>
                                        <FormItem
                                            label='用户名'
                                            hasFeedback
                                        >
                                            {getFieldDecorator('r_userName', {})(<Input/>)}
                                        </FormItem>
                                        <FormItem label='密码'>
                                            {getFieldDecorator('r_password', {})(<Input type="password"/>)}
                                        </FormItem>

                                        <FormItem label='确认密码'>
                                            {getFieldDecorator('r_confirm', {})(<Input type="password"/>)}
                                        </FormItem>
                                        <Button type='primary' htmlType='submit'>注册</Button>
                                    </Form>
                                </TabPane>



                            </Tabs>

                        </Modal>

                    </Col>
                    <Col span={2}></Col>
                </Row>

            </header>
        )
    }
}

export default PCHeader = Form.create()(PCHeader);